<template name="malls">
	<view>
		<!-- 自定义头部标题栏 -->
		<hx-navbar title="三秋兮商城" :back="false" :fixed="true" :color="topColor" :background-color="colorData" class="top">
		</hx-navbar>
		<!-- 轮播图 -->
		<scroll-view scroll-y class="page" :style="Hightdata" @scroll="scrollDown" :show-scrollbar="true">
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			 duration="500" current="0" v-if="banners.length > 0">
				<swiper-item v-for="(item,index) in banners" :key="index">
					<image :src="item.img_url" mode="aspectFill"></image>
				</swiper-item>
			</swiper>

			<!-- 限时秒杀 -->
			<view class="tui-spike-box">
				<view class="cu-bar  bg-white">
					<view class="action sub-title">
						<text class="text-xl text-bold text-orange">限时秒杀</text>
						<text class="bg-red" style="width:3rem"></text>
						<!-- last-child选择器-->
					</view>
				</view>
				<!--商品列表-->
				<swiper :indicator-dots="false" :autoplay="true" :interval="5000" :duration="400" :circular="true"
				 :display-multiple-items="2" :vertical="true" class="tui-spike-swiper">
					<swiper-item v-for="(item,index) in productList" :key="index">
						<view class="tui-pro-item list-item" hover-class="hover" :hover-start-time="150" @tap="detail(item)">
							<image :src="item.showImg" class="tui-pro-img" mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{item.title}}</view>
								<view class="tui-pro-btmbox">
									<view class="tui-pro-price">
										<text class="tui-sale-price">￥{{item.price}}</text>
										<text class="tui-factory-price">￥{{item.factory}}</text>
									</view>
									<view class="tui-countdown">
										<view class="tui-countdown-text">剩余</view>
										<tui-countdown :time="item.time" color="#e41f19" bcolor="#e41f19" colonColor="#e41f19" :scale="true"></tui-countdown>
										<view class="tui-countdown-text">结束</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="cu-bar  bg-white">
				<view class="action sub-title">
					<text class="text-xl text-bold text-orange">卡片商城</text>
					<text class="text-ABC text-orange">CARD</text>
					<!-- last-child选择器-->
				</view>
				<view style="display: flex; align-items: center;">
					<text class="text-df text-bold text-red" @tap="navigateToList">查看全部</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<!--商品列表-->
			<view class="shop-container">
				<view class="shop-item  solids radius shadow bg-white margin-top" v-for="(item,index) in newshoplist" :key="index"
				 @tap="detail(item)">
					<image class="shop-img" :src="item.showImg" mode="widthFix"></image>
					<view class='cu-tag bg-gradual-orange tag' v-if="item.status==1">热售中</view>
					<view class='cu-tag bg-grey tag' v-if="item.status==0">已售罄</view>
					<view class="title-text">
						<text class="text-black ">{{item.title}}</text>
					</view>
					<view style="width: 100rpx; padding:10rpx">
						<view class='cu-tag radius sm bg-gradual-orange'>累计售出{{item.sales}}件</view>
					</view>
					<text class="text-price text-red" style="padding-left:15rpx ;">{{item.price}}</text>
					<image src="../../static/购物.png" class="buy-shop" v-if="item.status==1" @tap.stop.prevent="gobuy" data-item="goCard"></image>
				</view>
			</view>
			<!-- 三秋兮民宿介绍 -->
			<view style="width: 716rpx;margin:15rpx auto;">
				<view class="action border-title">
					<text class="text-xl text-bold text-orange">民宿位置</text>
				</view>
			</view>
			<view class="introduce-title">
				<text class=" text-df">成都、重庆、莫干山、丽江、稻城等多地热门景区</text>
				<text class="text-df text-red" >更多</text>
			</view>
			<view class="introduce-imgs-box">
				<image src="http://chuantu.xyz/t6/721/1583133466x992245926.gif" class="introduce-img"></image>
				<image src="http://chuantu.xyz/t6/721/1583133501x977013264.jpg" class="introduce-img"></image>
				<image src="http://chuantu.xyz/t6/721/1583133540x977013264.gif" class="introduce-img"></image>
				<image src="http://chuantu.xyz/t6/721/1583133557x2073530529.gif" class="introduce-img"></image>
			</view>
			<!-- 三秋兮民宿预定列表 -->
			<view style="width: 716rpx;margin:15rpx auto;">
				<view class="action border-title">
					<text class="text-xl text-bold text-orange">酒店预订</text>
				</view>
			</view>
			<view class="house-list-box">
				<image src="//20041030.s21i.faiusr.com/2/ABUIABACGAAg1Pnh7wUo3LHWlQQw-gM4mAI.jpg.webp" class="house-img"></image>
				<view style="display: flex;">
					<view class="house-tag">
						<view class='cu-tag line-orange'>清幽雅致</view>
					</view>
					<view class="house-tag">
						<view class='cu-tag line-orange'>田园风光</view>
					</view>
				</view>
				<view class="text-xl text-bold">
					泸沽湖·三秋兮·西途别院
				</view>
				<view class=" text-df">
					<text class="text-grey">情人滩、女神湾、泸沽湖观景台</text>
				</view>
				<view class="house-price-box">
					<view>
						<text class="text-price text-red text-xl">520</text>
						<text class="text-sm">起</text>
						<text class="text-sm text-orange" style="margin-left: 35rpx;">会员免费</text>
					</view>
					<view class="house-tag">
						<view class='cu-tag line-cyan round'>所有房间<text class="cuIcon-right"></text></view>
					</view>
				</view>
			</view>
			<!-- 复用组件，有数据后可用v-for代替 -->
			<view class="house-list-box shadow">
				<image src="//20041030.s21i.faiusr.com/2/ABUIABACGAAg1Pnh7wUo64OwyQMw-gM4mAI.jpg.webp" class="house-img"></image>
				<view style="display: flex;">
					<view class="house-tag">
						<view class='cu-tag line-orange'>清幽雅致</view>
					</view>
					<view class="house-tag">
						<view class='cu-tag line-orange'>田园风光</view>
					</view>
				</view>
				<view class="text-xl text-bold">
					阆中·三秋兮.阆苑客栈
				</view>
				<view class=" text-df">
					<text class="text-grey">华光楼、阆中熊猫乐园、汉桓侯祠、中天楼</text>
				</view>
				<view class="house-price-box">
					<view>
						<text class="text-price text-red text-xl">480</text>
						<text class="text-sm">起</text>
						<text class="text-sm text-orange" style="margin-left: 35rpx;">会员免费</text>
					</view>
					<view class="house-tag">
						<view class='cu-tag line-cyan round'>所有房间<text class="cuIcon-right"></text></view>
					</view>
				</view>
			</view>
			<tui-nomore text="已经到最底了" :visible="true" bgcolor="#f7f7f7"></tui-nomore>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getDomhight,
		getHight
	} from "@/common/utils.js"
	import tuiNomore from "@/components/nomore/nomore"
	import tuiCountdown from "@/components/countdown/countdown"
	import hxNavbar from "@/components/hx-navbar/hx-navbar.vue"
	export default {
		name: "malls",
		components: {
			hxNavbar,
			tuiCountdown,
			tuiNomore,
		},
		computed: {
			Hightdata() {
				return getHight(this)
			}
		},
		onLoad() {
			this.height = getDomhight(".top", this)
			const query = uni.createSelectorQuery().in(this);
			query.select('.screen-swiper').boundingClientRect(data => {
				this.swiperHeight = data.height
			}).exec();
		},
		data() {
			return {
				swiperHeight: 0, //图片导航容器高度
				height: 0, //头部标题容器高度
				colorData: [242, 110, 16], //头部标题容器背景颜色
				topColor: "#FFFFFF", //头部标题颜色
				isCard: false,
				banners: [{
						img_url: "http://chuantu.xyz/t6/721/1582854867x2890211722.jpg"
					},
					{
						img_url: "http://chuantu.xyz/t6/721/1582854867x2890211722.jpg"
					},
					{
						img_url: "http://chuantu.xyz/t6/721/1582854867x2890211722.jpg"
					}
				],
				name: "",
				newshoplist: [{
						id: "0",
						title: "终身会员限时抢，集章一元住民宿！",
						showImg: "http://chuantu.xyz/t6/721/1582882048x1033347913.jpg",
						status: 1,
						tip: "注意：线下门店自取需在2020年1月24日后",
						sales: "99",
						price: "39.8",
						unit: "本"
					},
					{
						id: "0",
						title: "终身会员限时抢，集章一元住民宿！",
						showImg: "http://chuantu.xyz/t6/721/1582882048x1033347913.jpg",
						status: 1,
						tip: "注意：线下门店自取需在2020年1月24日后",
						sales: "99",
						price: "39.8",
						unit: "本"
					}, {
						id: "0",
						title: "终身会员限时抢，集章一元住民宿！",
						showImg: "http://chuantu.xyz/t6/721/1582882048x1033347913.jpg",
						status: 0,
						tip: "注意：线下门店自取需在2020年1月24日后",
						sales: "999",
						price: "39.8",
						unit: "本"
					}, {
						id: "0",
						title: "终身会员限时抢，集章一元住民宿！",
						showImg: "http://chuantu.xyz/t6/721/1582882048x1033347913.jpg",
						status: 0,
						tip: "注意：线下门店自取需在2020年1月24日后",
						sales: "999",
						price: "39.8",
						unit: "本"
					}

				],
				productList: [{
						id: "0",
						title: "终身会员限时抢，集章一元住民宿！",
						showImg: "http://chuantu.xyz/t6/721/1582882048x1033347913.jpg",
						status: 1,
						tip: "注意：线下门店自取需在2020年1月24日后",
						sales: "999",
						factory: 88,
						price: "39.8",
						unit: "本",
						time: 2100
					},
					{
						id: "0",
						title: "终身会员限时抢，集章一元住民宿！",
						showImg: "http://chuantu.xyz/t6/721/1582882048x1033347913.jpg",
						status: 1,
						tip: "注意：线下门店自取需在2020年1月24日后",
						sales: "999",
						factory: 88,
						price: "39.8",
						unit: "本",
						time: 2100
					},
					{
						id: "0",
						title: "终身会员限时抢，集章一元住民宿！",
						showImg: "http://chuantu.xyz/t6/721/1582882048x1033347913.jpg",
						status: 1,
						tip: "注意：线下门店自取需在2020年1月24日后",
						sales: "999",
						factory: 88,
						price: "39.8",
						unit: "本",
						time: 2100
					},
					{
						id: "0",
						title: "终身会员限时抢，集章一元住民宿！",
						showImg: "http://chuantu.xyz/t6/721/1582882048x1033347913.jpg",
						status: 1,
						tip: "注意：线下门店自取需在2020年1月24日后",
						sales: "999",
						factory: 88,
						price: "39.8",
						unit: "本",
						time: 2100
					},
					{
						id: "0",
						title: "终身会员限时抢，集章一元住民宿！",
						showImg: "http://chuantu.xyz/t6/721/1582882048x1033347913.jpg",
						status: 1,
						tip: "注意：线下门店自取需在2020年1月24日后",
						sales: "999",
						factory: 88,
						price: "39.8",
						unit: "本",
						time: 2100
					}
				]
			}
		},
		created() {
			// this.http.apiGet('/v1/mall/pageindex', null, result => {
			// 	if (result.flag) {
			// 		this.banners = result.data.bannerlist;
			// 	} else {
			// 		this.sui.toast.show(result.msg);
			// 	}
			// }, true);
		},
		methods: {
			scrollDown: function(e) {
				// 切换头部标题背景
				if (e.detail.scrollTop >= this.swiperHeight) {
					this.colorData = [255, 255, 255];
					this.topColor = "#000";
				} else {
					this.colorData = [242, 110, 16];
					this.topColor = "#FFFFFF";
				}
			},
			detail(item) {
				if (item.status) {
					this.sui.loading.show()
					uni.navigateTo({
						url: "../detail/detail"
					})
					this.sui.loading.close()
				}

			},
			navigateToList(){
				uni.navigateTo({
					url:"../shopList/shopList"
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		width: 750rpx;
	}

	.top-img {
		width: 750rpx;
		height: 400rpx;
	}

	.shop-container {
		width: 740rpx;
		display: flex;
		flex-wrap: wrap;
		margin: auto;
	}

	.shop-item {
		width: 350rpx;
		height: 530rpx;
		background-color: #FFFFFF;
		margin: 10rpx;
		position: relative;
	}

	.tag {
		position: absolute;
		right: 0;
		top: 0;
	}

	.shop-img {
		width: 350rpx;
		height: 340rpx;
	}

	.title-text {
		width: 320rpx;
		font-weight: 600;
		font-size: 26rpx;
		margin: auto;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.buy-shop {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		bottom: 5rpx;
		right: 30rpx;
	}

	/* 民宿介绍 */
	.introduce-title {
		width: 716rpx;
		display: flex;
		justify-content: space-between;
		margin: auto;
	}

	.introduce-imgs-box {
		width: 716rpx;
		height: 270rpx;
		display: flex;
		justify-content: space-between;
		margin: 34rpx auto 0;
	}

	.introduce-img {
		width: 170rpx;
		height: 270rpx;
		border-radius: 10rpx;
	}

	/* 民宿酒店列表 */
	.house-list-box {
		width: 716rpx;
		height: 624rpx;
		display: flex;
		flex-direction: column;
		margin: 44rpx auto 0;
	}

	.house-img {
		width: 100%;
		height: 400rpx;
		border-radius: 10rpx;
	}

	.house-tag {
		padding: 10rpx 10rpx 10rpx 0rpx;
	}
	.house-price-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	/*限时秒杀*/

	.tui-spike-box {
		background: #fff;
		margin-top: 20rpx;
	}

	.tui-spike-title {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	.tui-spike-title::after {
		left: 0;
	}

	.tui-spike-swiper {
		min-height: 440rpx;
	}

	.tui-pro-item {
		display: flex;
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		position: relative;
	}

	.tui-pro-item::after {
		left: 240rpx;
	}

	.tui-pro-img {
		width: 220rpx;
		height: 220rpx;
		display: block;
		flex-shrink: 0;
		border-radius: 12rpx;
	}

	.tui-pro-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-btmbox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-countdown {
		display: flex;
		align-items: center;
	}

	.tui-countdown-text {
		padding: 0 8rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #555;
	}

	/*限时秒杀*/
</style>
